<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<%@include file="/views/common/include/taglib.jsp"%>
<%@include file="/views/common/include/head.jsp"%>
<link rel="stylesheet" href="${ctx}/css/page/header2.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/shangcheng.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/shangchennav.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/slick.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/slick-theme.css" type="text/css">
<script src="${ctx}/js/controllers/mall/MainHomePageController.js" type="text/javascript"></script>
</head>
<style>
#focus {
    position: relative;
}
#focus .slider {
    height: 400px;
}
#focus .slider-panel .inner {
    width: 1200px;
    margin: 0 auto;
    height: 400px;
    overflow: hidden;
}
#focus .slider-nav {
    height: 0;
    line-height: 0;
    text-align: center;
}
#focus .slider-nav, #focus .slider-next, #focus .slider-prev {
    position: absolute;
    z-index: 4;
}
.slider-page a {
    position: absolute;
    top: 50%;
    margin-top: -31px;
    z-index: 1;
    display: block;
    width: 28px;
    height: 62px;
    line-height: 62px;
    background: #808080;
    background: rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000, endColorstr=#32000000);
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: normal;
    font-family: "simsun";
}
#focus .slider-nav li {
    /* width: 18px; */
    /* height: 18px; */
    line-height: 18px;
    display: inline-block;
}
.slider-nav .slider-selected:hover {
    background: #C30D23;
    color: #fff;
}
.slider-nav .slider-selected {
    background: #341F04;
    color: #fff;
}
.slider-nav li {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 2px;
    background: #5CB9CA;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    padding-top: 2px;
    cursor: pointer;
}
.content{
    margin: auto;
    padding: 20px;
    width: 600px;
}
.slick-slider {
    margin: 30px auto 50px;
}
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    /* color: transparent; */
    border: none;
    outline: none;
    /* background: transparent; */
    
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 0px;
    color: red;
   /*  line-height: 1;

    opacity: .75;
    color: white;
 */
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

.autoplay .slick-prev
{
    left: -18px;
    background: url(/proprietor/images/page/zuohua1.png);
    width: 10px;
    height: 49px;
}
.autoplay .slick-next{
	right: -18px;
	background: url(/proprietor/images/page/youhua1.png);
    width: 10px;
    height: 49px;
}
.autoplay1 .slick-prev
{
    left: -18px;
    background: url(/proprietor/images/page/sz.png);
    width: 7px;
    height: 43px;
}
.autoplay1 .slick-next{
	right: -18px;
	background: url(/proprietor/images/page/sy.png);
    width: 7px;
    height: 43px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -18px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

.searchhh {
    height: 34px;
    line-height: 30px;
    width: 60px;
    border: 1px solid #005E84;
}
</style>
<body>
<script type="text/javascript">
    var ctx = '${ctx}';
    
    function searchGoodsOrShops(){
		var selectType = $("#selectType").val();
		var name = $("#name").val();
		window.location.href = ctx +"/searchGoodsOrShops?pNo=1" + "&selectType=" +selectType +"&name=" + name;
	}
</script>
    <jsp:include page="/views/common/head_main.jsp" />
    <div class="bg">
        <div class="contentbox1 contentbox">
            <div class="nav">
                <ul>
                    <li><a style="color:#D4195D;" href="${ctx}/main?item=4">商城首页</a></li><span>|</span>
                    <li><a href="${ctx}/mallSeckill">秒杀专区</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#article">精品推荐</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#hotshop">热门商铺</a></li><span>|</span>
                    <li><a href="${ctx}/mallIntegral">积分专区</a></li>
                </ul>
               <div class="seabox">
					<select class="searchhh" id="selectType">
					<option value="1">商品</option>
					<option value="2">店铺</option>
					</select>
					<input class="search" type="text" id="name"></input><button class="searchbtn" onclick="searchGoodsOrShops()">搜索</button>
                   
                </div>
                <div class="cartbox">
                	 <img src="${ctx}/images/mall/cart.png">&nbsp;&nbsp;&nbsp;<a href="${ctx}/shopcart/shopcartList" target="_blank">我的购物车</a>
                </div>
            </div>
            <div id="focus" class="w">
				<div class="slider">
					<ul style="position: relative;" class="slider-main"  >
						<c:if test="${bannerSize > 0 }">
							<li class="slider-panel ng-animate" style=" z-index: 1; opacity: 1;" onmouseover="bannerOver();" onmouseout="bannerOut();">
								<div class="inner">
									<c:forEach begin="0" end="${bannerSize-1}" var="i">
									<c:set var="item" value="${adInfos[i]}"/>
										<a id="banner${i+1}" 
											<c:if test="${item.objType == 1 }"> href="${ctx}/shopIndex?shopId=${item.objId}" target="_blank"</c:if> 
											<c:if test="${item.objType == 2 }"> href="${ctx}/GoodsDetail?id=${item.objId}" target="_blank"</c:if> 
											<c:if test="${item.objType == 3 && item.url != null && item.url != ''}"> href="${item.url}" target="_blank"</c:if> > 
											<img alt="" src="${sessionScope.image_logo}${item.img}"  class="goods-photo" height="400" width="1200">
										</a>
									</c:forEach>
								</div>
							</li>
						</c:if>
						<c:if test="${bannerSize == null }">
							<li class="slider-panel ng-animate" style=" z-index: 1; opacity: 1;">
								<div class="inner">
									<img src="${sessionScope.image_logo}${defaultImg}" class="goods-photo" height="400" width="1200">
								</div>
							</li>
						</c:if>
					</ul>
					<div id="bannerBack" class="slider-page" style="margin-top:20px;" onmouseover="bannerOver();" onmouseout="bannerOut();">
						<ul class="slider-nav" style="width: 1200px;  margin-top: -70px;">
							<c:if test="${bannerSize > 0 }">
								<c:forEach begin="0" end="${bannerSize-1}" var="i">
								<c:set var="item" value="${adInfos[i]}"/>
									<li id="slider${i+1}" class="slider-item" style="cursor: pointer;height:20px;width:22px;"onclick="changeBanner(${i+1});" class="slider-selected">
									${i+1}
									</li>
								</c:forEach>
							</c:if>
						</ul>
					</div>
					
					<div id="bannerSwitch" class="slider-page" style="display: none;position: relative;" onmouseover="bannerOver();" onmouseout="bannerOut();">
							<a href="javascript:void(0)" title="上一张" onclick="preBanner();" class="slider-prev"
							style="margin-top: -250px">&lt;</a> 
						</div>
						<div id="bannerSwitch2" class="slider-page" style="display: none;position: relative;" onmouseover="bannerOver();" onmouseout="bannerOut();">
							<a href="javascript:void(0)"  onclick="nextBanner();" class="slider-next"
							style="right: 0px;margin-top: -250px">&gt;</a>
						</div>
				</div>
			</div>
        </div>
        <div class="contentbox2 contentbox">
            <div class="wid">
                     <%-- <c:forEach items="${shopCategoryList }" var="item" varStatus="status">
                            <a href="${ctx}/hotShopList?pNo=1&shopCategoryId=${item.id}"><img src="${sessionScope.image_logo}${item.logo}"/></a></a>
                        </c:forEach> --%>
                    <a  href="${ctx}/hotShopList?pNo=1&shopCategoryId=100146053872920600 "><img class="first" src="${ctx}/images/page/s2.png"></a>
                    <a href="${ctx}/hotShopList?pNo=1&shopCategoryId=100146053874705300 "><img src="${ctx}/images/page/s3.png"></a>
                    <a href="${ctx}/hotShopList?pNo=1&shopCategoryId=100146053876100400 "><img src="${ctx}/images/page/s4.png"></a>
                    <a  href="${ctx}/hotShopList?pNo=1&shopCategoryId=100146053877988200 "><img class="last" src="${ctx}/images/page/s5.png"></a>
            </div>
            <div style="overflow: auto;width: 102%;">
				<c:forEach items="${couponInfos}" var="item" varStatus="status">
					<div style="width:302.5px;height:150px;float:left;padding: 0 0 10px;">
						<c:if test="${status.index %2 == 0}">
							<div style="float:left;width:10px;background-image: url(images/mall/shop/left.png);height:140px;background-repeat: repeat-y;">
							</div>
						</c:if>
						<c:if test="${status.index %2 != 0}">
							<div style="float:left;width:10px;background-image: url(images/mall/shop/yellowleft.png);height:140px;background-repeat: repeat-y;">
							</div>
						</c:if>
						<div style="width: 90%;height:140px;<c:if test="${status.index %2 == 0}">background-color: #5CB9CA;</c:if><c:if test="${status.index %2 != 0}">background-color: #EFB852;</c:if>float:left;">
							<div style="height:100px;" >
								<div style="width:50%;text-align: center;float:left;color:#fff;margin-top:20px;">
								<span style="font-size: 50px;font-weight: bold;">
									<fmt:formatNumber type="number" value="${item.breakPrice}" maxFractionDigits="0"/>
								</span>
								<span>元</span>
								</div>
								<div style="width:50%;text-align: center;float:left;color:#fff;font-size: 16px;margin-top:20px;">
									<p>单笔满<fmt:formatNumber type="number" value="${item.breakLine}" maxFractionDigits="0"/>元使用</p>
									<p style="font-size: 25px;font-weight: bold;">平&nbsp;&nbsp;台&nbsp;&nbsp;券</p>
								</div>
							</div>
							<div style="border-top:1px dashed #fff;height: 1px;overflow:hidden;margin:0px 12px;"></div>
							<div onclick="getCoupon(${item.id})">
								<p style="color:#fff;text-align: center;line-height: 25px;font-size: 16px;cursor: pointer;">抢先领取</p>
							</div>
						</div>
						<c:if test="${status.index %2 == 0}">
							<div style="float:left;width:10px;background-image: url(images/mall/shop/right.png);height:140px;background-repeat: repeat-y;">
							</div>
						</c:if>
						<c:if test="${status.index %2 != 0}">
							<div style="float:left;width:10px;background-image: url(images/mall/shop/yellowright.png);height:140px;background-repeat: repeat-y;">
							</div>
						</c:if>
					</div>
				</c:forEach>
			</div>
			<c:if test="${not empty seckillGoodsList }">
	            <div class="miaosha">
	                <img src="${ctx}/images/page/spikeArea.png">
	                <div class="showpic">
	                    <div class="bigpic" style="height: 350px;">
	                    	<c:forEach items="${seckillGoodsList}" var="item" varStatus="status">
	                    		<c:if test="${status.index < 4}">
	                    			<c:if test="${status.index == 0}">
		                    			<a href="${ctx}/GoodsDetail?id=${item.id}" target="_blank"> 
												<img  src="${sessionScope.image_logo}${item.logo}" style="height: 321px;width: 275px;padding-right: 10px;float: left;" class="" >
										</a>
									</c:if>
									<c:if test="${status.index == 1 || status.index == 2}">
		                    			<a href="${ctx}/GoodsDetail?id=${item.id}" target="_blank"> 
												<img  src="${sessionScope.image_logo}${item.logo}" style="height: 321px;width: 275px;float: left;padding: 0 8px 0 10px;" class="" >
										</a>
									</c:if>
									<c:if test="${status.index == 3}">
		                    			<a href="${ctx}/GoodsDetail?id=${item.id}" target="_blank"> 
												<img  src="${sessionScope.image_logo}${item.logo}" style="height: 321px;width: 275px;float: left;padding-left:10px;" class="" >
										</a>
									</c:if>
	                    		</c:if>
	                    	</c:forEach>
							<!-- 广告图不够时用默认图片填补 -->
							<c:forEach begin="${bannerSizeSeckill+1}" end="4" var="i">
								<c:if test="${i == 1}">
									<img  src="${ctx}/images/mall/expect.jpg" style="height: 321px;width: 275px;padding-right: 10px;float: left;">
								</c:if>
								<c:if test="${i == 2 || i == 3}">
									<img  src="${ctx}/images/mall/expect.jpg" style="height: 321px;width: 275px;float: left;padding: 0 8px 0 10px;">
								</c:if>
								<c:if test="${i == 4}">
									<img src="${ctx}/images/mall/expect.jpg" style="height: 321px;width: 275px;float: left;padding-left:10px;">
								</c:if>
							</c:forEach>
	                    	<a href="${ctx}/mallSeckill" target="_blank"><img class="findmore"src="${ctx}/images/page/genduo.png"></a>
	                    </div>
	                </div>
	            </div>
            </c:if>
            <div class="article" id="article">
                <img src="${ctx}/images/page/tj.png"/>
                <div class="floatwrap">
                    <div class="left">
	                    <div class="fade" style="margin:0px;z-index: 990;">
				       		 <c:forEach items="${adGoodInfos}" var="item" varStatus="status">
				       		 	<div>
					       		 	<c:if test="${status.index < 5}">
								        <a <c:if test="${item.objType ==2}"> href="${ctx}/GoodsDetail?id=${item.objId}"</c:if> 
								        <c:if test="${item.objType == 1}"> href="${ctx}/shopIndex?pNo=1&shopId=${item.objId}"</c:if>
								        <c:if test="${item.objType == 3}"> href="${item.url}"</c:if> target="_blank">
								        <img width="398" height="427" src="${sessionScope.image_logo}${item.img}"/>
								        </a>
								     </c:if>
					        	</div>
				       		 </c:forEach>
				       		 <c:forEach begin="${adGoodInfosSize+1}" end="5" var="i">
				       		 	<div>
								 	<img width="398" height="427" src="${sessionScope.image_logo}${defaultImgAdLeft}"/>
								</div>
				       		 </c:forEach>
						 </div>
					  </div>      
                     <div class="right">
                        <c:forEach items="${adGoodInfos1}" var="item" varStatus="status">
	                        <div class="pic6">
	                            <div class="picwrap">
		                            <c:if test="${status.index < 6}">
			                            <a <c:if test="${item.objType ==2}"> href="${ctx}/GoodsDetail?id=${item.objId}"</c:if> 
								        <c:if test="${item.objType == 1}"> href="${ctx}/shopIndex?pNo=1&shopId=${item.objId}"</c:if>
								        <c:if test="${item.objType == 3}"> href="${item.url}"</c:if> target="_blank">
								        <img width="258" height="214" src="${sessionScope.image_logo}${item.img}"/>
							        	</a>
							        </c:if>
	                            </div>
	                        </div>
                        </c:forEach>
			       		<c:forEach begin="${adGoodInfos1Size+1}" end="6" var="i">
				       		<div class="pic6">
		                        <div class="picwrap">
									<img width="258" height="214" src="${sessionScope.image_logo}${defaultImgAdRight}"/>
	                            </div>
	                        </div>
			       		</c:forEach>
                    </div>
                </div>
               	<div style="text-align: center;">
	               	<div class="autoplay" style="margin:20px;padding-bottom: 20px;">
	               		<c:forEach items="${adGoodInfos2}" var="item" varStatus="status">
               		 		<%-- <c:if test="${status.index < 4}"> --%>
                        	   <a <c:if test="${item.objType ==2}"> href="${ctx}/GoodsDetail?id=${item.objId}"</c:if> 
						        <c:if test="${item.objType == 1}"> href="${ctx}/shopIndex?pNo=1&shopId=${item.objId}"</c:if>
						        <c:if test="${item.objType == 3}"> href="${item.url}"</c:if> target="_blank">
						        <img width="278" height="172" src="${sessionScope.image_logo}${item.img}"/>
						        </a>
						     <%-- </c:if> --%>
               		 	</c:forEach>
			       		<c:forEach begin="${adGoodInfos2Size+1}" end="4" var="i">
			       			<div>
								<img width="278" height="172" src="${sessionScope.image_logo}${defaultImgAdDown}"/>
							</div>
			       		</c:forEach>
                    </div>
               	</div>
            </div>
            <div class="hotshop" id="hotshop">
                <img src="${ctx}/images/page/hot.png">
                    <div style="text-align: center;">
	               		 <div class="autoplay1" style="margin:20px;padding-bottom: 20px;">
	               		 	<c:forEach items="${adHotShopInfos}" var="item" varStatus="status">
	                        	<div style="border: 1px solid #ccc;margin:5px;">
	                        	<a <c:if test="${item.objType ==2}"> href="${ctx}/GoodsDetail?id=${item.objId}"</c:if> 
								        <c:if test="${item.objType == 1}"> href="${ctx}/shopIndex?pNo=1&shopId=${item.objId}"</c:if>
								        <c:if test="${item.objType == 3}"> href="${item.url}"</c:if> target="_blank">
								        <img width="182" height="167" src="${sessionScope.image_logo}${item.img}"/>
								        </a>
	                        		<%-- <a href="${ctx}/hotShopList?pNo=1&shopCategoryId=${item.id}" target="_blank">
		                        		<img width="176" height="167" src="${sessionScope.image_logo}${item.img}"/>
	                        		</a> --%>
	                        	</div>
	               		 	</c:forEach>
				       		<c:forEach begin="${adHotShopInfosSize+1}" end="6" var="i">
	                        	<div style="border: 1px solid #ccc;margin:5px;">
								<img width="182" height="167" src="${sessionScope.image_logo}${defaultImgHotShop}"/>
								</div>
				       		</c:forEach>
	                    </div>
                    </div>
                <div class="bluebox"></div>
            </div>
        </div>
    </div>
    <script src="${ctx}/js/slide/jquery-1.9.1.min.js"></script>
	<script src="${ctx}/js/slide/slick.min.js"></script>
    <script type="text/javascript">
    setFYBannerSize('${bannerSize}');
    $(document).ready(
			function(){
			    $('.fade').slick({
			    	  dots: true,
			    	  infinite: true,
			    	  speed: 500,
			    	  fade: true,
			    	  autoplay: true,
			    	  autoplaySpeed: 2000,
			    	  cssEase: 'linear'
			    	});
			    $('.autoplay').slick({
			    	  slidesToShow: 4,
			    	  slidesToScroll: 1,
			    	  autoplay: true,
			    	  autoplaySpeed: 2000,
			    	});
			    $('.autoplay1').slick({
			    	  slidesToShow: 6,
			    	  slidesToScroll: 1,
			    	  autoplay: true,
			    	  autoplaySpeed: 2000,
			    	});
			    		
			}
		)

    </script>
    <jsp:include page="/views/common/footer.jsp" />
    <script type="text/javascript">
    </script>
    <!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
    <script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
</body>
</html>